<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid;
            position: absolute;
            left: 100px;
        }
        .box::after{
            content: "";
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box" ></div>
    <script>
        // 获取非行间样式  getComputedStyle
        // getComputedStyle(元素,伪类属性)['样式名称'];
        
        // 获取或者设置行间样式 ：元素.style
        // console.log(document.querySelector(".box").style.width)

        // var boxEle = document.querySelector(".box");
        // var res =   getComputedStyle(boxEle)['width'];  // 默认获取元素的属性

        // 可以通过第二个参数获取伪类的属性
        // var  res = getComputedStyle(boxEle,"after")['width'];
        //  console.log(res);

        // 设置行间样式
        // document.querySelector(".box").style.width = "200px";

        // 小练习 ： box 非行间样式  点击box之后 box运动到 现有left + 300px的位置 
        


    </script>
</body>

</html>